<template>
	<view class="bankcard">
		<view class="add-bankcard">
			<view class="add">
				<view class="card-title">添加银行卡</view>
				<view class="input-item">
					<view class="ipt-title">持卡人</view>
					<input class="ipt-name" type="text" placeholder="请输入您的姓名" placeholder-class="ipt-c">
				</view>
				<view class="input-item">
					<view class="ipt-title">卡号</view>
					<input class="ipt-name" type="number" placeholder="请输入您的银行卡号" placeholder-class="ipt-c">
				</view>
				<view class="input-item">
					<view class="ipt-title">开户行</view>
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="ipt-name_">{{array[index]}}</view>
					</picker>
					<!-- <input class="ipt-name" disabled type="text" placeholder="请选择" placeholder-class="ipt-c"> -->
					<image class="ipt-img" src="../../static/my-icon/bottom.png" mode=""></image>
				</view>
			</view>
			<view class="add-bankcard-btn">
				下一步
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['建设银行', '招商银行', '农业银行'],
				index: 0,
			};
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
		},
	}
</script>

<style lang="scss">
	page {
		// background-color: #ccc;
	}

	.ipt-c {
		font-size: 26rpx;
		letter-spacing: 3rpx;
		color: #989898;
	}

	.bankcard {
		padding-top: 20rpx;
	}

	.add-bankcard {
		width: 750rpx;
		height: 903rpx;
		background-color: #ffffff;
		padding: 50rpx 0 60rpx 0;
		box-sizing: border-box;

		.add {
			padding: 0 67rpx;
			margin-bottom: 260rpx;

			.card-title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				font-weight: bold;
				letter-spacing: 4rpx;
				color: #333333;
				margin-bottom: 100rpx;
			}

			.input-item {
				margin-top: 50rpx;
				display: flex;
				align-items: center;
				padding: 0 1rpx 20rpx;
				border-bottom: 1px solid #e5e5e5;

				.ipt-title {
					font-size: 30rpx;
					letter-spacing: 3rpx;
					color: #333333;
					margin-right: 84rpx;
				}

				.ipt-name {
					font-size: 26rpx;
					letter-spacing: 3rpx;
					color: #333;
				}

				.ipt-name_ {
					width: 304rpx;
					font-size: 26rpx;
					letter-spacing: 3rpx;
					color: #333;
				}

				.ipt-img {
					width: 24rpx;
					height: 13rpx;
					margin-left: 80rpx;
				}
			}

			.input-item:nth-child(2) {
				margin-top: 0rpx;
			}

			.input-item:nth-child(3) {
				.ipt-title {
					margin-right: 117rpx;
				}
			}
		}
	}

	.add-bankcard-btn {
		width: 713rpx;
		height: 100rpx;
		background-color: #c60122;
		border-radius: 50rpx;
		margin: 0 19rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		letter-spacing: 4rpx;
		color: #ffffff;
	}
</style>
